<template>
	<view v-if="data" class="coupon-item flex justify-between item-center px-16 py-8 mt-16 mx-16" :class="data.state === 1 ? 'active' : ''">
		<view class="left flex-col" :class="data.state === 1 ? 'color-primary' : 'text-color-hint'">
			<view class="fs-40 text-center"><text class="fs-16">¥</text>{{ data.amt }}</view>
			<view v-if="data.redPacketType === 2" class="fs-12 text-center" :style="data.state === 1 ? 'color: rgba(250,69,67,0.6);' : ''">{{ data.fullAmount == 0 ? `无门槛券` : `满${data.fullAmount}元可用` }}</view>
		</view>
		<view class="right ml-24 flex item-center justify-between">
			<view class="flex-col fs-12 text-color-hint justify-between">
				<view class="fs-16 font-bold c3 mt-4">{{ data.title }}</view>
				<view>{{data.receiveTime}}-{{data.expireTime}}</view>
				<view v-if="data.redPacketType === 2" class="fs-10 text-color-hint">适用策划人：{{data.businessShortName}}</view>
			</view>
			<view v-if="data.state === 1" class="fs-12 px-8 py-4 radius-8 text-white bg-primary flex-shrink ml-4" @click="toUse">去使用</view>
			<view v-if="data.state === 2 || data.state === 4" class="fs-12 px-8 py-4 radius-8 text-color-hint border-hint bg-white flex-shrink ml-4">{{data.state===2?'已使用':'已过期'}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		unref
	} from 'vue'

	const props = defineProps({
		data: {
			type: Object,
			required: true
		}
	})

	const emits = defineEmits(['toUse'])

	const toUse = () => {
		emits('toUse', unref(props.data))
	}
</script>

<style lang="scss" scoped>
	.coupon-item{
		background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-notes.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		&.active{
			background-image: url("https://huodtg.oss-cn-hangzhou.aliyuncs.com/hd/miniprogram/bg-notes-active.png");
		}
		.left{
			width: 72px;
		}
		.right{
			width: 255px;
		}
	}
</style>